Kohtspikri rakendamine: ligipääsetav teave hiirega ülelibistamisel ja fookuses

Kohtspikrid on väikesed kontekstipõhised abiteated, mis ilmuvad, kui kasutaja liigutab hiirekursori elemendile või fokuseerib selle. Need võivad pakkuda lisateavet, selgitada elemendi eesmärki või anda vihjeid funktsiooni kasutamiseks. Valesti rakendatuna võivad kohtspikrid aga kergesti muutuda ligipääsetavuse õudusunenäoks. See juhend kirjeldab parimaid tavasid kõigile, sealhulgas puuetega kasutajatele, kasutatavate kohtspikrite loomiseks.

Miks on ligipääsetavus kohtspikrite puhul oluline

Ligipääsetavus ei tähenda ainult nõuetele vastavust; see on parema kasutajakogemuse loomine kõigile. Kui kohtspikrid ei ole ligipääsetavad, võib see välistada kasutajad, kes toetuvad abitehnoloogiatele nagu ekraanilugejad, klaviatuurinavigatsioon või kõnesisend. Mõelge järgmistele stsenaariumidele:

• Ekraanilugeja kasutajad: Kui kohtspikker pole õigesti märgistatud, ei pruugi ekraanilugeja selle olemasolust või sisust teada anda.
• Klaviatuuri kasutajad: Kui kohtspikker ilmub ainult hiirega ülelibistamisel, ei pääse klaviatuuri kasutajad sellele ligi.
• Liikumispuudega kasutajad: Hiirega ülelibistamiseks vajalikud täpsed liigutused võivad olla keerulised või võimatud.
• Kognitiivsete puuetega kasutajad: Valesti ajastatud või segane kohtspikker võib tekitada frustratsiooni ja takistada arusaamist.

Järgides ligipääsetavuse parimaid tavasid, saame tagada, et kohtspikrid täiustavad, mitte ei takista kõigi kasutajate kasutajakogemust.

Ligipääsetavate kohtspikrite põhiprintsiibid

Järgmised põhimõtted on ligipääsetavate kohtspikrite loomisel üliolulised:

1. Pakkuge alternatiivset ligipääsu: Tagage, et kohtspikrid oleksid ligipääsetavad nii hiirega ülelibistamisel kui ka klaviatuuri fookusega.
2. Kasutage ARIA atribuute: Kasutage ARIA (Accessible Rich Internet Applications) atribuute, et kohtspikreid abitehnoloogiatele õigesti tuvastada ja kirjeldada.
3. Hallake fookust: Kontrollige, kuhu liigub fookus, kui kohtspikrit kuvatakse ja peidetakse.
4. Tagage piisav kontrastsus: Pakkuge piisav värvikontrastsus kohtspikri teksti ja tausta vahel.
5. Andke piisavalt aega: Andke kasutajatele piisavalt aega kohtspikri sisu lugemiseks.
6. Tehke need suletavaks: Pakkuge selge viis kohtspikri sulgemiseks.
7. Vältige liigset kasutamist: Kasutage kohtspikreid säästlikult ja ainult vajaduse korral.

Rakendamise tehnikad

1. Hiirega ülelibistamise ja fookuse kasutamine

Ligipääsetavate kohtspikrite kõige kriitilisem aspekt on tagada, et need oleksid kättesaadavad nii hiire- kui ka klaviatuurikasutajatele. See tähendab, et kohtspikker peaks ilmuma nii hiirega ülelibistamisel kui ka siis, kui element saab fookuse.

HTML:

            <a href="#" aria-describedby="tooltip-example">Näidislink</a>
<div id="tooltip-example" role="tooltip" style="display: none;">See on näidis-kohtspikker.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Veenduge, et kohtspikker oleks pealmine */
}

            

              
                Copy
              
            
          

Selgitus:

• aria-describedby: See atribuut seob lingi kohtspikri elemendiga selle ID kaudu. See annab abitehnoloogiatele teada, et kohtspikker pakub lingi kohta lisateavet.
• role="tooltip": See ARIA roll määratleb elemendi kui kohtspikri.
• CSS kasutab kõrvalasuva elemendi selektorit (+), et kuvada kohtspikker, kui lingile liigutatakse hiir või see fokuseeritakse.

JavaScript (Täpsem kontroll - valikuline):

Kuigi CSS saab hakkama lihtsa näitamise/peitmisega, võimaldab JavaScript robustsemat kontrolli, eriti kui kohtspikrid genereeritakse dünaamiliselt või vajavad keerukamat käitumist.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. ARIA atribuutide kasutamine

ARIA atribuudid on olulised semantilise teabe pakkumiseks abitehnoloogiatele. Siin on ülevaade peamistest atribuutidest:

• aria-describedby: Nagu varem mainitud, loob see atribuut seose käivitava elemendi ja kohtspikri elemendi vahel.
• role="tooltip": See atribuut määratleb elemendi selgesõnaliselt kohtspikrina.
• aria-hidden="true"/aria-hidden="false": Kasutage neid, et näidata, kas kohtspikker on abitehnoloogiatele hetkel nähtav. Kui kohtspikker on peidetud, määrake aria-hidden="true". Kui see on nähtav, määrake aria-hidden="false". See on eriti oluline, kui kasutate JavaScripti kohtspikri nähtavuse kontrollimiseks.

Näide:

            <button aria-describedby="help-tooltip">Esita</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Vormi esitamiseks klõpsake siin.</div>
            

              
                Copy
              
            
          

JavaScript (aria-hidden jaoks):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Fookuse haldamine

Kui kohtspikker ilmub, ei tohiks see üldjuhul *ära võtta* fookust käivitavalt elemendilt. Fookus peaks jääma elemendile, mis kohtspikri käivitas. See tagab, et klaviatuurikasutajad saavad lehel navigeerimist jätkata ilma ootamatute katkestusteta.

Siiski võib esineda olukordi, kus te *tahate* fookuse kohtspikrile viia, eriti kui kohtspikker sisaldab interaktiivseid elemente (nt linke, nuppe). Sellisel juhul veenduge, et:

• Kohtspikker on visuaalselt eristatav, et näidata fookuse olemasolu.
• On olemas selge viis fookuse tagastamiseks algsele käivitavale elemendile (nt sulgemisnupp kohtspikri sees).

Enamikul juhtudel on lihtsuse ja kasutatavuse huvides eelistatav vältida fookuse haldamist kohtspikri enda sees.

4. Piisava kontrastsuse tagamine

Värvikontrastsus on loetavuse seisukohalt ülioluline. Veenduge, et teie kohtspikrite tekstivärvil oleks piisav kontrastsus taustavärvi suhtes. Veebisisu ligipääsetavuse suunised (WCAG) soovitavad kontrastsussuhteks vähemalt 4.5:1 tavalise teksti ja 3:1 suure teksti (18pt või 14pt paksus kirjas) puhul.

Kasutage veebipõhiseid kontrastsuse kontrollijaid, et veenduda, et teie värvivalikud vastavad ligipääsetavuse standarditele. Näiteid kontrastsuse kontrollijatest on:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Näide (hea kontrastsus):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Näide (halb kontrastsus):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Piisava aja võimaldamine

Kasutajad vajavad kohtspikri sisu lugemiseks piisavalt aega. Vältige liiga kiiresti kaduvaid kohtspikreid. Kuigi maagilist numbrit pole, püüdke saavutada minimaalseks kuvamisajaks mõned sekundid. Samuti peaks kohtspikker jääma nähtavale seni, kuni kasutaja hoiab hiirt käivitaval elemendil või on sellele fokuseerinud. Kui peate kohtspikri muude sündmuste tõttu sulgema, andke märku, et kohtspikker sulgub.

Kui kohtspikri sisu on pikk, kaaluge kasutajale võimaluse andmist kohtspikri käsitsi sulgemiseks (nt sulgemisnupp või Esc-klahvi vajutamine).

6. Nende suletavaks tegemine

Kuigi kohtspikrid kaovad sageli automaatselt, kui kasutaja hiire eemale liigutab või fookuse eemaldab, on hea tava pakkuda selget viisi nende käsitsi sulgemiseks, eriti pikkade või interaktiivseid elemente sisaldavate kohtspikrite puhul.

Kohtspikrite sulgemise meetodid:

• Sulgemisnupp: Lisage kohtspikri sisse visuaalselt silmapaistev sulgemisnupp.
• Esc-klahv: Lubage kasutajatel kohtspikker sulgeda Esc-klahvi vajutamisega.
• Väljaspool klõpsamine: Sulgege kohtspikker, kui kasutaja klõpsab kusagil väljaspool kohtspikrit ja käivitavat elementi. (Kasutage ettevaatlikult, kuna see võib olla häiriv).

Näide (sulgemisnupp):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  See on minu kohtspikri sisu.
  <button onclick="hideTooltip()">Sule</button>
</div>
            

              
                Copy
              
            
          

Näide (Esc-klahv):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Asendage oma tegeliku kohtspikri peitmise funktsiooniga
  }
});

            

              
                Copy
              
            
          

7. Liigse kasutamise vältimine

Kohtspikreid tuleks kasutada säästlikult ja ainult siis, kui need pakuvad tõeliselt kasulikku teavet. Kohtspikrite liigne kasutamine võib liidest segada, kasutajaid häirida ja tekitada frustreeriva kogemuse.

Alternatiivid kohtspikritele:

• Selged sildid: Kasutage vormiväljade, nuppude ja linkide jaoks selgeid ja kirjeldavaid silte.
• Kontekstipõhine abi: Pakkuge abiteksti otse liideses, asjakohaste elementide lähedal.
• Abidokumentatsioon: Linkige põhjalikule abidokumentatsioonile keerukamate funktsioonide jaoks.

Täpsemad kaalutlused

Dünaamiline sisu

Kui teie kohtspikri sisu genereeritakse dünaamiliselt (nt laaditakse API-st või uuendatakse vastavalt kasutaja sisendile), veenduge, et aria-describedby atribuut ja kohtspikri nähtavus oleksid vastavalt uuendatud. Kasutage nende värskenduste haldamiseks JavaScripti.

Paigutamine

Kaaluge hoolikalt oma kohtspikrite paigutust. Vältige nende paigutamist viisil, mis varjab olulist sisu või põhjustab paigutuse nihkeid. Pidage silmas erinevaid ekraanisuurusi ja eraldusvõimet ning kasutage CSS-i, et tagada kohtspikrite alati nähtavus vaateaknas.

Mobiilseadmed

Kohtspikrid toetuvad traditsiooniliselt hiirega ülelibistamise interaktsioonidele, mis pole puutetundlikes seadmetes saadaval. Mobiilseadmete jaoks kaaluge alternatiivsete interaktsioonimeetodite kasutamist, näiteks:

• Puudutus: Kuvage kohtspikker, kui kasutaja puudutab elementi.
• Pikk vajutus: Kuvage kohtspikker, kui kasutaja vajutab pikalt elemendile.
• Kuva fookuses Kuvage, kui element saab fookuse. Seda saab saavutada JavaScripti abil, kontrollides puutetoe olemasolu (nt ('ontouchstart' in window)) ja muutes kuvamiskäitumist vastavalt.

Oma kohtspikrite testimine

Testige oma kohtspikreid põhjalikult, et tagada nende ligipääsetavus kõigile kasutajatele. Kasutage manuaalse testimise ja automatiseeritud ligipääsetavuse testimise tööriistade kombinatsiooni.

Testimismeetodid:

• Klaviatuurinavigatsioon: Veenduge, et kohtspikrid on klaviatuuri abil ligipääsetavad.
• Ekraanilugeja testimine: Kasutage ekraanilugejat, et veenduda, et kohtspikrid teatatakse õigesti.
• Värvikontrastsuse analüüs: Kasutage värvikontrastsuse kontrollijat, et veenduda piisavas kontrastsuses.
• Mobiilne testimine: Testige kohtspikreid erinevatel mobiilseadmetel ja ekraanisuurustel.
• Automatiseeritud ligipääsetavuse testimine: Kasutage tööriistu nagu axe DevTools, WAVE või Lighthouse, et tuvastada potentsiaalseid ligipääsetavuse probleeme.

Rahvusvahelistamine (i18n) ja lokaliseerimine (l10n)

Globaalsele vaatajaskonnale kohtspikrite arendamisel pidage silmas rahvusvahelistamist ja lokaliseerimist:

• Teksti suund: Toetage nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) teksti suundi. Kasutage paigutuseks füüsiliste omaduste (nt margin-left, margin-right) asemel CSS-i loogilisi omadusi (nt margin-inline-start, margin-inline-end).
• Keelepõhised tõlked: Pakkuge kohtspikri sisu tõlkeid erinevatesse keeltesse.
• Kuupäeva ja kellaaja vormingud: Kohandage kuupäeva ja kellaaja vorminguid vastavalt kasutaja lokaadile.
• Numbrite vormingud: Kasutage erinevate piirkondade jaoks sobivaid numbrivorminguid (nt komakohad, tuhandete eraldajad).

Kokkuvõte

Ligipääsetavate kohtspikrite rakendamine nõuab hoolikat planeerimist ja detailidele tähelepanu pööramist. Järgides selles juhendis toodud põhimõtteid ja tehnikaid, saate luua kohtspikreid, mis on kasutatavad kõigile, olenemata nende võimetest. Pidage meeles, et ligipääsetavus on pidev protsess, seega jätkake oma kohtspikrite testimist ja täiustamist, et tagada nende vastavus kõigi teie kasutajate vajadustele.

Ressursid

• ARIA autoritavade juhend (APG) – Kohtspikker
• Veebisisu ligipääsetavuse suunised (WCAG) 2.1
• MDN Web Docs – ARIA